<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--react的核心库-->
    <script src="build/react.js" charset="utf-8"></script>
    <!--提供与dom相关的功能-->
    <script src="build/react-dom.js" charset="UTF-8"></script>
    <!--将jsx语法转换成javascript语法-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" charset="UTF-8"></script>
    <style>
        .pStyle{font-size: 20px;}
    </style>
</head>
<body>
<!--react渲染的模板内容会插入到dom节点中，作为一个容器-->
<div id="container"></div>
</body>
<!--在react开发中使用jsx，与javascript不兼容，在使用jsx的地方，要设置type="text/label"-->
<!--label是一个转换编辑器，ES6转成可以在浏览器中运行的代码-->
<script type="text/babel">

//    在此处编写react代码
//    ReactDOM.render(
//            <h1>hello react</h1>,
//        document.getElementById("container")
//    );

//    JSX入门，不是一门新的语言，是个语法。
//    1.jsx必须借助react环境运行
//    2.jsx标签其实就是html标签，主不过我们在javascript中书写这些标签的时候，不用使用“”括起来，可以像XML一样书写


//创建一个组建类，用于输出hello react
//React.createClass方法创建组件类
//每个组建类都要实现自己的render方法
//    var HelloMessage=React.createClass({
//        render:function () {
//            return <h1>Hello React</h1>
//        }
//    });
//    ReactDOM.render(
////        在模板中插入<HelloMessage/>，会自动生成一个实例
//        <HelloMessage/>,
//        document.getElementById("container")
//    );

//    设置组件的样式，试讲三种
//    1.内联样式(div)，2.对象样式(h1)，3.选择器样式(p)
/*
var hStyle={
    backgroundColor:"green",
    color:"red"
};
    var ShowMessage=React.createClass({
       render:function () {
           return(
           <div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
               <h1 style={hStyle}>{this.props.firstRow}</h1>
               <p className="pStyle">{this.props.secondRow}</p>
           </div>
           );
       }
    });
ReactDOM.render(
    <ShowMessage firstRow="你好" secondRow="蓝鸥"/>,
    document.getElementById("container")
);*/

//    复合组件，也被成为组合组件（需求：定义一个组件WebShow,功能，输出网站的名字和网址，网址是一个可以点击的链接）
    var WebName=React.createClass({
        render:function () {
            return <h1>蓝鸥科技</h1>
        }
    });
    var WebLink=React.createClass({
        render:function () {
            return <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>
        }
    });
    var WebShow=React.createClass({
       render:function () {
           return(
           <div>
               <WebName/>
               <WebLink/>
           </div>
           )
       }
    });
    ReactDOM.render(
        <WebShow/>,
        document.getElementById("container")
    );
</script>
</html>